<template>
  <div class="com-container">
    <div class="com-chart" ref="rank_ref"></div>
  </div>
</template>

<script>
import { getRankData } from "../api"
export default {
  name: "Rank",
  data() {
    return {
      chartInstance: null,
      allData: {}, // 所有的数据
      startValue: 0, // 区域缩放的开始值
      endValue: 9, // 区域缩放的结束值
      timeId: null,
    }
  },
  mounted() {
    this.initChart()
    this.getData()
    window.addEventListener("resize", this.adaptChart)
    this.adaptChart()
  },
  destroyed() {
    window.removeEventListener("resize", this.adaptChart)
    clearInterval(this.timeId)
  },
  methods: {
    // 初始化echarts
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.rank_ref, "chalk")

      const option = {
        title: {
          text: "▎ 地区销售排行",
          left: 20,
          top: 20,
        },
        grid: {
          top: "40%",
          left: "5%",
          right: "5%",
          bottom: "5%",
          containLabel: true,
        },
        tooltip: {
          show: true,
        },
        xAxis: {
          type: "category",
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "bar",
          },
        ],
      }
      this.chartInstance.setOption(option)

      // 鼠标移入停止定时器
      this.chartInstance.on("mouseover", () => {
        clearInterval(this.timeId)
      })
      // 鼠标移除开启定时器
      this.chartInstance.on("mouseout", () => {
        this.startInterval()
      })
    },
    // 得到数据
    async getData() {
      const res = await getRankData()
      // 将数据从大到小进行排列
      this.allData = res.sort((a, b) => b.value - a.value)
      this.updateChart()
      this.startInterval()
    },
    // 更新数据
    updateChart() {
      const colorArr = [
        ["#0BA82C", "#4FF778"],
        ["#2E72BF", "#23E5E5"],
        ["#5052EE", "#AB6EE5"],
      ]
      let xArr = [],
        yArr = []
      this.allData.map((item) => {
        xArr.push(item.name)
        yArr.push(item.value)
      })
      const option = {
        xAxis: {
          data: xArr,
        },
        series: [
          {
            data: yArr,
            // 给不同的柱子产生不同的颜色
            itemStyle: {
              color: (arg) => {
                let targetColorArr = null
                if (arg.value > 300) {
                  targetColorArr = colorArr[0]
                } else if (arg.value > 200) {
                  targetColorArr = colorArr[1]
                } else {
                  targetColorArr = colorArr[2]
                }
                // 颜色渐变
                return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: targetColorArr[0],
                  },
                  {
                    offset: 1,
                    color: targetColorArr[1],
                  },
                ])
              },
            },
          },
        ],
        dataZoom: {
          show: false, // 是否显示区域缩放的控件
          startValue: this.startValue, // 开始值
          endValue: this.endValue, // 结束值
        },
      }
      this.chartInstance.setOption(option)
    },
    // 分辨率适配
    adaptChart() {
      // 随着屏幕的大小改变而改变
      const fontsize = (this.$refs.rank_ref.offsetWidth / 100) * 3.6
      const option = {
        title: {
          textStyle: {
            fontSize: fontsize,
          },
        },
        series: [
          {
            barWidth: fontsize,
            itemStyle: {
              barBorderRadius: [fontsize / 2, fontsize / 2, 0, 0],
            },
          },
        ],
      }
      this.chartInstance.setOption(option)
      // 调用图表事件 图表才会发生大小
      this.chartInstance.resize()
    },
    // 开启定时器轮询
    startInterval() {
      if (this.timeId) {
        clearInterval(this.timeId)
      }
      this.timeId = setInterval(() => {
        this.startValue++
        this.endValue++
        if (this.endValue > this.allData.length - 1) {
          // 重置区域缩放的值
          this.startValue = 0
          this.endValue = 9
        }
        this.updateChart()
      }, 2000)
    },
  },
}
</script>
<style lang="less" scoped></style>
